<template>
	<div id="search-page">
		<search-params
			:firstParams="firstParams"
			:secondParams="secondParams"
			@handle-reset="resetParams"
			@handle-params="searchTableData">
		</search-params>
		<double-table
			:columns="columns"
			:data="tableData"
			:isSum="isSum"
			:label="label"
			:labelWidth="labelWidth"
			:prop="prop"
			:stripe="stripe"
			:totalCount="totalCount"
			@handle-size="handleSizeChange"
			@handle-current="handleCurrentChange">
		</double-table>
	</div>
</template>

<script>
export default {
	name: "form-page",
	props: {
		firstParams: {
			type: Array,
			default() {
				return [];
			},
			validator: (value) => {
				return value.length <= 6;
			}
		},
		secondParams: {
			type: Array,
			default() {
				return [];
			},
			validator: (value) => {
				return value.length <= 5;
			}
		},
		columns: {
			type: Array,
			default() {
				return [];
			},
			validator: (value) => {
				return value.length >= 1;
			}
		},
		label: {
			type: String,
			validator: (value) => {
				return value != null && value !== "";
			}
		},
		prop: {
			type: String,
			validator: (value) => {
				return value != null && value !== "";
			}
		},
		stripe: {
			type: Boolean,
			default: true
		},
		isSum: {
			type: Boolean,
			default: false
		},
		labelWidth: {
			type: String,
			default: "160px"
		},
		searchData: {
			type: Function,
			default: () => {
			}
		}
	},
	data() {
		return {
			currentPage: 1,
			pageSize: 10,
			totalCount: 0,
			tableData: [],
			pageData: [],
			searchParams: {}
		};
	},
	computed: {
		startIndex() {
			return (this.currentPage - 1) * this.pageSize;
		},
		endIndex() {
			return this.currentPage * this.pageSize - 1;
		}
	},
	methods: {
		//查询数据
		searchTableData(searchParams) {
			this.searchParams = searchParams;
			//调用父组件的查询数据方法,赋值给相应的tableData
			if (this.searchData) {
				this.tableData = this.searchData();
				this.totalCount = this.tableData.length;
				this.pageData = this.tableData;
				this.pagingTableData(this.tableData);
			}
		},
		resetParams() {
			this.searchParams = {};
			this.tableData = [];
			this.totalCount = 0;
			this.pageData = [];
		},
		filterData(array) {
			if (!this.dataType.isArray(array)) {
				this.message.error("数据类型错误!");
			}
			let keys = Object.keys(this.searchParams) || [];
			if (keys.length !== 0 && array.length !== 0) {
				keys.forEach(key => {
					array = this.filterTableData(key, array);
				});
			}
			return array;
		},
		//筛选数据
		filterTableData(key, array) {
			return array.filter((item) => {
				if (key.toString().toLowerCase().indexOf("date") !== -1 && this.dataType.isNumber(this.searchParams[key])) {
					let value = this.dateUtils.toLocalDateString(item[key]);
					let param = this.dateUtils.toLocalDateString(new Date(this.searchParams[key]));
					return value === param;
				}
				if (key.toString().toLowerCase().indexOf("date") !== -1 && this.dataType.isArray(this.searchParams[key])) {
					let value = item[key].getTime();
					let params = this.searchParams[key];
					return value >= params[0] && value <= params[1];
				}
				return item[key].toString() === this.searchParams[key].toString();
			});
		},
		handleSizeChange(val) {
			this.pageSize = val;
			this.pagingTableData(this.pageData);
		},
		handleCurrentChange(val) {
			this.currentPage = val;
			this.pagingTableData(this.pageData);
		},
		//分页数据
		pagingTableData(array) {
			this.tableData = array.filter((item, index) => {
				return index >= this.startIndex && index <= this.endIndex;
			});
		}
	}
};
</script>

<style scoped>

</style>
